<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-07-05 15:25:53
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-07-31 10:44:28
 * @FilePath: \vue3-progect\src\views\example\three\geometry\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--缓存几何-->
<template>
	<div id="three_container"></div>
</template>

<script setup>
import * as THREE from "three";
import { AxesHelper } from "../case/helper/AxesHelper";
import { CameraHelper } from "../case/helper/CameraHelper";
import { WebGLRenderer } from "../create/renderer";
import { OrbitControlsHelper } from "../case/helper/OrbitControls";
import { PerspectiveCamera } from "../create/camera";
import { onMounted } from "vue";

//场景
const scene = new THREE.Scene();
let texture = null;
AxesHelper(THREE, scene);
onMounted(() => {
	let container = document.getElementById("three_container");

	const camera = PerspectiveCamera(
		THREE,
		90,
		container.offsetWidth / container.offsetHeight,
		0.1,
		1000
	);
	camera.position.z = 200;
	// camera.position.y = 200;
	CameraHelper(THREE, scene, camera);
	const renderer = WebGLRenderer(THREE, container);
	OrbitControlsHelper(THREE, scene, camera, renderer);

	demo();
	function animate() {
		// texture.offset.x += 0.001; //设置纹理动画：偏移量根据纹理和动画需要，设置合适的值
		requestAnimationFrame(animate);
		renderer.render(scene, camera);
	}
	animate();
});
const demo = () => {
	const ambient = new THREE.AmbientLight("#ffffff");
	scene.add(ambient);
	const url = new URL("@/assets/image/map/kGu7x.jpg", import.meta.url).href;
	const geometry = new THREE.PlaneGeometry(200, 100);
	console.log("uv:", geometry.attributes.uv);
	const texLoad = new THREE.TextureLoader(); //纹理贴图加载器TextureLoader
	texture = texLoad.load(url);
	// 设置贴图在U方向和V方向上的平铺次数
	// texture.repeat.set(1, 1);	// U方向铺1，V方向铺1，1张贴图贴住平面整体
	// texture.repeat.set(2, 1);	// U方向铺2，V方向铺1，2张贴图沿U方向贴住平面整体
	texture.repeat.set(1, 1); // U方向铺1，V方向铺0.5，沿V方向将贴图裁成一般，半张贴图贴住平面整体
	// texture.offset.y = 0;
	// texture.wrapS = THREE.RepeatWrapping;
	const material = new THREE.MeshLambertMaterial({
		color: 0xffffff,
		map: texture
	}); //map表示材质的颜色贴图属性
	const mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);
	console.log(mesh, "mesh");
	/**
	 * 自定义顶点UV坐标
	 * UV顶点坐标你可以根据需要在0~1之间任意设置，具体怎么设置，要看你想把图片的哪部分映射到Mesh的几何体表面上。
	 */
	const uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
	const geometrycopy = geometry.clone();
	geometrycopy.attributes.uv = new THREE.BufferAttribute(uvs, 2); //2个为一组,表示一个顶点的纹理坐标
	const meshCopy = new THREE.Mesh(geometrycopy, material);
	meshCopy.position.y = 120;

	scene.add(meshCopy);
	return;

	/**
	 * 圆形几何贴图
	 */
	const circleMesh = mesh.clone();
	circleMesh.geometry = new THREE.CircleGeometry(100, 100);
	circleMesh.position.z = -50;
	circleMesh.position.y = 50;
	scene.add(circleMesh);

	/**
	 * 纹理对象Texture阵列
	 */
	const geometryCz = new THREE.PlaneGeometry(500, 500);
	const urlCz = new URL("@/assets/image/map/瓷砖贴图.jpg", import.meta.url)
		.href;
	const textureCz = texLoad.load(urlCz);
	// 设置阵列模式
	textureCz.wrapS = THREE.RepeatWrapping;
	textureCz.wrapT = THREE.RepeatWrapping;
	// uv两个方向纹理重复数量
	textureCz.repeat.set(12, 12); //注意选择合适的阵列数量
	const materialCz = new THREE.MeshLambertMaterial({
		color: 0xffffff,
		map: textureCz,
		transparent: true //使用背景透明的png贴图，注意开启透明计算
	});
	const meshCz = new THREE.Mesh(geometryCz, materialCz);
	meshCz.rotateX(-Math.PI / 2);
	scene.add(meshCz);

	/**
	 * 网格地面辅助观察GridHelper
	 */
	// 添加一个辅助网格地面
	const gridHelper = new THREE.GridHelper(300, 25, 0x004444, 0x004444);
	scene.add(gridHelper);
	mesh.position.y = -1; //适当偏移，不与地面重合

	/**
	 * 6. UV动画
	 */
};
</script>

<style lang="less" scoped>
#three_container {
	height: 100%;
}
</style>
